<template>
  <div class="qr-code" ref="qr"></div>
</template>

<script>
// import * as QrCode from "./qrcode.min.js";
// console.log(QrCode);
export default {
  name: "QrCode",
  props: ["text"],
  data() {
    return {
      observer: null
      // chart: null
    };
  },
  computed: {},
  watch: {
    text(fresh, old) {
      // console.log("[watch][text]", fresh);
      this.setQrCode();
    }
  },

  mounted() {
    this.setQrCode();
  },
  beforeDestroyed() {},
  methods: {
    setQrCode() {
      if (!window.QRCode) {
        console.error("缺少二维码插件QRCode");
      }
      if (!this.qr) {
        this.qr = new window.QRCode(this.$refs.qr, {
          text: this.text,
          width: 512,
          height: 512,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      } else {
        this.qr.makeCode(this.text);
      }
    }
  }
};
</script>

<style>
.qr-code {
  width: 60px;
  height: 60px;
  margin: auto;
  position: relative;
}
.qr-code img {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}
</style>
